<template>
  <div class="dir">
    <div class="map">
      <q-icon v-if="orderStatus && !xDeviation" class="right" name="east" size="3em" color="green" />
      <q-icon v-if="orderStatus && xDeviation" class="left" name="west" size="3em" color="green" />
      <q-icon v-if="orderStatus && !yDeviation" class="top" name="north" size="3em" color="green" />
      <q-icon v-if="orderStatus && yDeviation" class="bottom" name="south" size="3em" color="green" />
    </div>
  </div>
</template>

<script lang="ts">
import { PropType, computed, defineComponent, ref } from 'vue';
import { useTerminalStore } from '../store';
import { storeToRefs } from 'pinia';
import { CraneProps } from '../main/models';

export default defineComponent({
  name: 'terminal-crane-direction',

  props: {
    craneData: {
      type: Object as PropType<CraneProps>,
      required: true,
    },
  },

  setup(props) {
    const store = useTerminalStore();
    const { posx, posy, orderStatus } = storeToRefs(store);
    const xDeviation = computed(() => {
      return Number(props.craneData.xAct) > Number(posx.value);
    });

    const yDeviation = computed(() => {
      return Number(props.craneData.yAct) > Number(posy.value);
    });
    return {
      xDeviation,
      yDeviation,
      orderStatus,
    };
  },
});
</script>
<style lang="scss" scoped>
.dir {
  width: 28%;
  height: 100%;
  background-color: rgba(132, 113, 113, 0.2);
  .map {
    position: relative;
    width: 180px;
    height: 180px;
    background-color: aquamarine;
    .right {
      position: absolute;
      right: 10px;
      top: 0;
      bottom: 0;
      margin: auto;
      animation: moveRight 1.2s infinite;
    }
    .left {
      position: absolute;
      left: 10px;
      top: 0;
      bottom: 0;
      margin: auto;
      animation: moveLeft 1.2s infinite;
    }
    .top {
      position: absolute;
      top: 10px;
      left: 0;
      right: 0;
      margin: auto;
      animation: moveTop 1.2s infinite;
    }
    .bottom {
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
      margin: auto;
      animation: moveBottom 1.2s infinite;
    }
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes moveRight {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(30px);
  }
  60% {
    transform: translateX(15px);
  }
}
@keyframes moveLeft {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(-30px);
  }
  60% {
    transform: translateX(-15px);
  }
}
@keyframes moveTop {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
@keyframes moveBottom {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(30px);
  }
  60% {
    transform: translateY(15px);
  }
}
</style>
